<template>
    <div>
        <a-layout-content class="content" id="top">
            <a-row>
                <!--标题-->
                <a-col :xs="{ span: 21, offset: 1 }" :md="{ span: 17, offset: 2 }" align="center">
                    <h1>{{ detail.articleTitle }}</h1>
                </a-col>

                <!--小屏只显示顶部目录-->
                <a-col class="info" :xs="{ span: 18, offset: 2 }" :md="{ span: 0}">
                    <!--目录-->
                    <a-anchor class="catalog" :affix="false" :show-ink-in-fixed="false">
                        <a-anchor-link v-for="(t,i) in titles" :href="'#' + i" :title="t.t1">
                            <a-anchor-link v-for="(t2,j) in t.t2" :href="'#'+ i + '_' + j" :title="t2" />
                        </a-anchor-link>
                    </a-anchor>
                </a-col>

                <!--正文-->
                <a-col class="article" id="article" :xs="{ span: 22, offset: 1 }" :md="{ span: 17, offset: 2 }" v-html="content" />

                <!--大屏时只显示侧边目录-->
                <a-col :xs="{ span: 0 }" :md="{ span: 4, offset: 0 }" class="rightCatalog" :target-offset="targetOffset">
                    <a-anchor class="catalog" :affix="true" :offsetTop="80" :bounds="15">
                        <a-anchor-link v-for="(t,i) in titles" :href="'#' + i" :title="t.t1">
                            <a-anchor-link v-for="(t2,j) in t.t2" :href="'#'+ i + '_' + j" :title="t2" />
                        </a-anchor-link>
                    </a-anchor>
                </a-col>

                <!--不为自我介绍的时候展示上一篇下一篇-->
                <span v-if="detail.articleId != 0">
                    <a-col :xs="{ span: 9, offset: 1}" :md="{ span: 5, offset: 2}" align="left" class="other">
                        Previous Post：<br>
                        <a @click="showDetails(detail.prevArticleId)">{{ detail.prevArticleTitle }}</a>
                    </a-col>
                    <a-col :xs="{ span: 9, offset: 3}" :md="{ span: 5, offset: 7 }" align="right"  class="other">
                        Next Post：<br>
                        <a @click="showDetails(detail.nextArticleId)">{{ detail.nextArticleTitle }}</a>
                    </a-col>
                </span>

            </a-row>

            <a-back-top id="bt"/>

        </a-layout-content>
    </div>
</template>

<script>
    import marked from  'marked'
    import highlight from "highlight.js";

    import { requestArticleDetail } from "../../network/request";

    /**
     * 构建目录
     */
    function getCatalog() {

        let nodes = document.getElementById("article").childNodes;
        //获取H3和H2标题
        let titles = [];
        for (let i = 0; i < nodes.length; i++) {
            let node = nodes[i];
            if (node.nodeName == "H2" || node.nodeName == "H3") {
                titles.push(node);
            }
        }

        let ts = [];
        //双指针，先查找H2，然后查找改H2与下一个H2之间的H3标题
        for (let i = 0, j = 0, index = 0; i < titles.length; i = j, index++) {

            //获取节点
            let h2 = titles[i];
            //判断是否为H2标题
            if (h2.nodeName == "H2") {
                //添加锚点
                h2.id = index;
                //创建一个标题对象,先设置好一级标题
                let t = {
                    t1: h2.innerText,
                    t2: []
                };
                //在数组范围内遍历从上一个H2到下一个H2范围内的节点
                while (++j < titles.length && titles[j].nodeName != "H2") {
                    let h3 = titles[j];
                    //添加锚点
                    h3.id = index + "_" + (j - i - 1);
                    //添加二级标题节点
                    t.t2.push(h3.innerText);
                }
                //添加至节点集合
                ts.push(t);
            }
        }
        return ts;
    }

    /**
     * 高亮代码
     */
    function hightLightCode() {
        const pre = document.querySelectorAll("pre code");
        pre.forEach((el) => {
            highlight.highlightBlock(el);
        })
    }

    export default {
        name: "ArticleDetails",
        data() {
            return {
                articleId: 0,
                titles: {},
                targetOffset: 0,
                detail: {},
                content: ""
            };
        },
        methods: {
            showDetails(id) {
                //不对不存在的文章进行调整
                if (id != -1) {
                    this.$router.push({
                        path: '/details',
                        query: { id }
                    });
                }
            }
        },
        created() {
            //获取路由携带的文章id
            this.articleId = this.$route.query.id;
            //请求数据
            requestArticleDetail(this.articleId).then(req => {
                this.detail = req;
                if (req.articleContent != null) {
                    this.content = marked(req.articleContent);
                }
            })
        },
        updated() {
            hightLightCode();
        },
        watch: {
            //文章渲染以后执行
            detail: function () {
                this.$nextTick(function () {
                    //代码高亮
                    hightLightCode();
                    //获取标题目录
                    this.titles = getCatalog();
                    //获取页面中间位置
                    this.targetOffset = window.innerHeight / 2;
                });
            },
            //监听路由参数变化
            $route: function () {
                // 当访问id不同的文章时重新加载页面
                if (this.articleId != this.$route.query.id) {
                    window.scrollTo(0, 0);
                    this.articleId = this.$route.query.id;
                    window.location.reload();
                }
                //请求数据
                /*requestArticleDetail(this.articleId).then(req => {
                    console.log(req);
                    this.detail = req;
                    if (req.articleContent != null) {
                        this.content = marked(req.articleContent);
                    }
                })*/
            }
        }
    }
</script>

<style scoped>
    li {
        list-style: none;
    }
    .content {
        padding:80px 0;
        background-color: var(--my-white);
    }
    .article {
        padding: 20px 25px;
    }
    .rightCatalog {
        padding-top: 70px;
    }
    .rightCatalog .catalog {
        border-right:none;
    }
    .catalog {
        background-color: var(--my-white);
        border-right: var(--my-gary) solid 2px ;
        padding: 0 10px;
    }
    .other {
        padding-top: 20px;
        padding-left: 25px;
        font-size: var(--h6);
    }
    .other a{
        font-size: var(--h5);
        font-weight: bold;;
    }
</style>